<template>
	<view class="layout">
		<!-- 导航栏 -->
		<nav-tab @toggle="navToggleMeth"></nav-tab>
			<!-- <view class="acea-row row-middle row-between category-box"> -->
				<!-- <view class="acea-row row-middle row-between longTab"> -->
<!-- 					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
						:scroll-left="tabRight" show-scrollbar="true">
						<view class="longItem" :class="index===categoryOn?'click':''" v-for="(item,index) in categorys"
							:key="index" :id="'id'+index" @click="longClick(index)">{{item}}</view>
					</scroll-view> -->

					<!-- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
						:scroll-left="tabLeft" show-scrollbar="true">
						<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index"
							:class="index===categoryOn?'click':''" v-for="(item,index) in categorys" :key="index"
							:id="'id'+index" @click="longClick(index)">{{item}}</view>
						<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
							<view class="underline"></view>
						</view>
					</scroll-view> -->
				<!-- </view> -->
			<!-- </view> -->
			<!-- 			<view class="sort-box">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<view v-for="(item,index) in filtrates" :key="index"
						:class="['sort',filtrateOn==index?'sort-on':'']" @click="filtrateOn=index">{{item.name}}</view>
					<view class="acea-row row-middle sort sort-jiantou-b">时间</view>
					<view class="row-middle acea-row sort sort-jiantou-b">排序</view>
				</scroll-view>
			</view> -->
		<!-- </view> -->
		<!-- 列表 -->
		<view class="list">
			<view v-for="item in list" :key="item.id">
				<!-- <view class="acea-row row-middle row-between title-box">
					<view class="item-l title line2">{{categorys[item.type]}} 丨{{item.managementResponse?item.managementResponse.title:''}}</view>
					<view class="item-r btn-box">
						<view :class="item.rewardStatus == 2?'btn-gray':'btn-red'" @click="toPage('/pages/details/offeraRreward/offeraRreward?taskId='+ item.id+'&fbInfo='+JSON.stringify(item))">{{lqStatus[item.rewardStatus]?lqStatus[item.rewardStatus]:'未领取'}}</view>
						<view class="text">资金已托管</view>
					</view>
				</view>
				<view class="item-l">
					<view class="gray-text">您已分享人数{{item.toShare?item.toShare:0}}人，赚取价值{{item.toEarnGold?item.toEarnGold:0}}(金币)</view>
					<view class="gray-text">绑定下级成员{{item.toShare?item.toShare:0}}人</view>
				</view>
				<view class="detail-text" @click="toPage('/pages/details/offeraRreward/offeraRreward?taskId='+ item.id+'&fbInfo='+JSON.stringify(item))">任务详情</view>
				<view class="share-text" v-if="item.rewardStatus == 1">继续分享</view> -->
				<task-item :list="item"></task-item>
			</view>

			<!-- 		<view class="item">
				<view class="acea-row row-middle row-between title-box">
					<view class="item-l title line2">出租 丨汽车西站-五一广场-地下商业街丨2000㎡ 丨 20000元/㎡/月</view>
					<view class="item-r btn-box">
						<view class="btn-red">领任务</view>
						<view class="text">(已领122人)</view>
					</view>
				</view>
				<view class="item-l">
					<view class="gray-text">分享赚1: <text class="red-text">金1000元</text>（已托管平台）</view>
					<view class="gray-text">分享赚2: <text class="red-text">价值1888元(金币)</text>,剩余184(金币)</view>
				</view>
				<view class="detail-text">任务详情</view>
			</view> -->

			<!-- 			<view class="item">
				<view class="acea-row row-middle row-between title-box">
					<view class="item-l title line2">出租 丨汽车西站-五一广场-地下商业街丨2000㎡ 丨 20000元/㎡/月</view>
					<view class="item-r btn-box">
						<view class="btn-gray">已领</view>
						<view class="text">(已领122人)</view>
					</view>
				</view>
				<view class="item-l">
					<view class="gray-text">分享赚1: <text class="red-text">金1000元</text>（已托管平台）</view>
					<view class="gray-text">分享赚2: <text class="red-text">价值1888元(金币)</text>,剩余184(金币)</view>
				</view>
				<view class="detail-text"  @click="toPage('/pages/details/offeraRreward/offeraRreward')">任务详情</view>
			</view> -->

		</view>

		<view class='loadingicon acea-row row-center row-middle' @click="toMore">
			<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
		</view>
	</view>
</template>

<script>
	import {
		RewardListApi
	} from '@/api/reward.js'
	import {
		toPage
	} from '@/filters/commFilter.js'
	import taskItem from '@/pages/others/components/taskItem.vue'
	import navTab from './navTab.vue'
	export default {
		components: {
			taskItem,
			navTab
		},
		data() {
			return {
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				tabRight: 0,
				categorys: ['租转', '出售', '求租', '求购', '招工', '商家服务', '二手', '供应', '求职'],
				categoryOn: 0,
				// ,{type:'0',name:'时间'},{type:'0',name:'排序'}
				filtrates: [{
					type: '',
					name: '全部'
				}, {
					type: '1',
					name: '进行中'
				}, {
					type: '2',
					name: '已完成'
				}],
				filtrateOn: 0,
				page: 1,
				totalPage: 1,
				list: [],
				lqStatus: {
					0: '未领取',
					1: '任务进行中',
					2: '已完成'
				},
				loading: true,
				loadTitle: '',
				searchType:{}
			};
		},
		onLoad(options) {
			if (options.type) {
				this.categoryOn = Number(options.type);
			}
		},
		onShow() {
			this.page = 1;
			// this.getList()
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 4
				}
			})
			// this.getList()
		},
		// watch: {
		// 	filtrateOn() {
		// 		this.list = []
		// 		this.getList()
		// 	}
		// },
		methods: {
			toPage,
			longClick(index) {
				if (this.categorys.length >= 4) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index;
				this.loadTitle = ''
				this.isLeft = index * this.isWidth //设置下划线位置
				if (this.filtrateOn == 0) {
					this.list = [];
					this.page = 1;
					this.getList()
				} else {
					this.filtrateOn = 0;
				}
			},
			navToggleMeth(item){
				console.log("test")
				this.page = 1;
				this.searchType = item;
				this.getList();
			},
			toMore(){
				this.page++;
				this.getList();
			},
			async getList() {
				this.loading = false;
				try {
					if (this.page == 1) {
						this.list = [];
					}
					// let ty = this.categoryOn == 0 || this.categoryOn == 1 ? 0 : this.categoryOn + 1;
					// let statuss = this.categoryOn == 0 ? '0,2' : (this.categoryOn == 1 ? '1' : '');
					let {
						data
					} = await RewardListApi({
						page: this.page,
						limit: 20,
						city: this.$city,
						type: this.searchType.type,
					});
					console.log(data)
					// this.list = data.list
					if (this.page == 1) {
						this.loading = true
						this.list = data.list;
						if (this.list.length <= 0) {
							this.loadTitle = '暂无数据'
						}else{
							this.loadTitle = '加载更多'
						}
					} else {
						this.list = this.list.concat(data.list);
						this.loading = true
						if (data.list.length <= 0) {
							this.loadTitle = '已加载所有'
						}
					}
				} catch (e) {
					console.log("ee",e)
					//TODO handle the exception
					this.loading = true
					this.loadTitle = '暂无数据'
				}
			}
		},
		onReachBottom() {
			this.page++;
			this.getList();
		}

	}
</script>

<style lang="scss">
	.layout {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll-Y {
			height: 100%;
		}

		.scroll {
			overflow-y: auto;
			flex: 1;
		}
	}

	.navTabBox {
		background: #ffffff;
		padding: 24rpx 24rpx;

		.category-box {
			color: rgba(50, 50, 51, 1);
			font-size: 32rpx;
			font-weight: 500;

			.click {
				color: rgba(238, 33, 45, 1);
				border-bottom: 2px solid rgba(238, 33, 45, 1);
			}

			.longTab {
				width: calc(100%);
				/* #ifdef H5 */
				padding-bottom: 20rpx;
				/* #endif */
				/* #ifdef MP */
				padding-top: 12rpx;
				padding-bottom: 12rpx;

				/* #endif */
				.longItem {
					height: 50upx;
					display: inline-block;
					line-height: 50upx;
					text-align: center;
					font-size: 32rpx;
					margin: 0 20rpx;

					&.click {
						font-weight: bold;
					}
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: .5s;

					.underline {
						width: 33rpx;
						height: 4rpx;
						background-color: rgba(238, 33, 45, 1);
					}
				}
			}
		}

		.filtration {
			margin-left: 18rpx;
			padding: 12rpx 0 16rpx;

			.text {
				width: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.sanjiao {
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top-color: rgba(128, 128, 128, 1);
				border-bottom-width: 0;
			}
		}
	}

	.sort-box {
		width: 100%;
		padding: 12rpx 0 0;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 33rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	.sort-jiantou-b {
		display: inline-block;
		white-space: nowrap;
		border-radius: 10rpx;
		background: rgba(247, 247, 247, 1);
		padding: 12rpx 33rpx 12rpx 0;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(50, 50, 51, 1);
		margin-right: 18rpx;
		position: relative;

		&::after {
			display: block;
			content: '';
			position: absolute;
			right: 12rpx;
			top: 50%;
			margin-top: -4rpx;
			width: 8rpx;
			height: 8rpx;
			border-top: 1px solid rgba(50, 50, 51, 1);
			border-right: 1px solid rgba(50, 50, 51, 1);
			transform: rotate(135deg);
		}
	}

	// 列表
	.list {
		padding: 0 24rpx;

		.item {
			background: #ffffff;
			border-radius: 10rpx;
			padding: 24rpx;
			position: relative;
			margin-bottom: 28rpx;

			.detail-text {
				position: absolute;
				bottom: 24rpx;
				right: 24rpx;
				text-align: right;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding-right: 20rpx;

				&::after {
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-top: 1px solid rgba(238, 33, 45, 1);
					border-right: 1px solid rgba(238, 33, 45, 1);
					transform: rotate(45deg);
					right: 24rpx;
					top: 50%;
					margin-top: -5rpx;
					right: 0;
				}
			}

			.share-text {
				position: absolute;
				bottom: 66rpx;
				right: 24rpx;
				text-align: right;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(14, 81, 158, 1);
				padding-right: 20rpx;

				&::after {
					content: '';
					display: block;
					position: absolute;
					width: 10rpx;
					height: 10rpx;
					border-top: 1px solid rgba(14, 81, 158, 1);
					border-right: 1px solid rgba(14, 81, 158, 1);
					transform: rotate(45deg);
					right: 24rpx;
					top: 50%;
					margin-top: -5rpx;
					right: 0;
				}
			}

			.item-l {
				width: 68%;
			}

			.item-r {
				width: 28%;
			}

			.title {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(56, 56, 56, 1);
			}

			.btn-box {
				.btn-red {
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 50rpx;
					background: rgba(238, 33, 45, 1);
					border: 1px solid rgba(235, 36, 61, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					padding: 0 24rpx;
				}

				.btn-gray {
					width: 100%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 50rpx;
					background: rgba(233, 231, 231, 1);
					border: 1px solid rgba(233, 231, 231, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					padding: 0 24rpx;
				}

				.text {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: rgba(128, 128, 128, 1);
					text-align: center;
				}
			}

			.gray-text {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(166, 166, 166, 1);
			}

			.red-text {
				font-size: 24rpx;
				font-weight: 500;
				line-height: 42rpx;
				color: rgba(212, 48, 48, 1);
			}
		}
	}
</style>